/* Footer styles */

.footer {
  background: var(--bg);
  border-top: 1px solid rgba(255, 215, 0, 0.2);
  padding: 60px 20px 30px;
  color: var(--text);
  text-align: center;
  position: relative;
}

[data-theme="light"] .footer {
  border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.7), transparent, rgba(255, 215, 0, 0.7));
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* Main footer grid layout */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  column-gap: 90px;
  row-gap: 40px;
  align-items: start;
  text-align: left;
  padding-bottom: 20px;
}

/* Brand section */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accent-icon{
    width: 50px;
    height: 50px;   
    flex-shrink: 0; 
    position: relative;
    transform: translateY(5px);
    margin-left: 10px;
}

.footer-brand img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.footer-brand h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  color: var(--accent);
  margin: 0;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
}

.tagline {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

/* Column Headers */
.footer-column h3 {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 20px;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

/* Lists (Common) */
.footer-links-list,
.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Links Styling */
.footer-links-list a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
}

.footer-links-list a:hover {
  color: var(--accent);
  padding-left: 5px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* Contact Info Styling */
.contact-info-list li {
  color: var(--text-muted);
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

.contact-info-list i {
  color: var(--accent);
  font-size: 1rem;
  margin-top: 3px;
  /* Align icon with text top */
}

.contact-info-list a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s;
}

.contact-info-list a:hover {
  color: var(--accent);
}

/* Social Icons Section */
.social-column h3 {
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.social-icons a {
  color: var(--text);
  font-size: 1.5rem;
  transition: transform 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  /* Subtle bg for icons */
}

.social-icons a:hover {
  color: var(--accent);
  background: rgba(255, 215, 0, 0.1);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}

/* Footer Bottom (Copyright) */
.footer-bottom {
  margin-top: 50px;
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  padding-top: 25px;
  text-align: center;
}

.footer-info {
  font-size: 0.9rem;
  color: var(--text-muted);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.6;
}

.footer-info .founder,
.footer-info .made-in-india {
  color: var(--accent);
  font-weight: 600;
}

/* About Founder */
.footer-founder p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 260px;
}


/* ================= RESPONSIVE ================= */

/* Tablet (max 1024px) */
@media (max-width: 1024px) {
  .footer-container {
    gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Tablet Portrait / Small Laptop (max 768px) */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    /* 2 Column layout */
    gap: 40px 20px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    /* Brand takes full width */
    align-items: center;
    text-align: center;
  }

  .brand-header {
    justify-content: center;
  }

  /* Center alignment for tablets structurally if preferred, 
     but keeping cols left aligned looks neater. */
  /* Center alignment for tablets structurally if preferred, 
     but keeping cols left aligned looks neater. */
}

/* Mobile (max 480px) */
@media (max-width: 480px) {
  .footer {
    padding: 40px 25px 30px;
    /* Slightly more side padding for breathing room */
    text-align: left;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Increased gap for better separation like reference */
    text-align: left;
    align-items: flex-start;
  }

  /* Brand Section - Left Align */
  .footer-brand {
    align-items: flex-start;
    text-align: left;
  }

  .brand-header {
    justify-content: flex-start;
  }

  .footer-brand h2 {
    font-size: 1.6rem;
  }

  .tagline {
    max-width: 90%;
    /* Prevent too wide text on small screens */
  }

  /* Lists - Left Align */
  .footer-links-list,
  .contact-info-list {
    align-items: flex-start;
    width: 100%;
  }

  .footer-links-list a:hover {
    padding-left: 5px;
    /* Restore hover shift since we are left aligned now */
  }

  /* Social Icons - Left Align */
  .social-icons {
    justify-content: flex-start;
    width: 100%;
  }

  .footer-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-column h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    /* Slightly larger headings for mobile legibility */
  }

  /* Footer Bottom - Keep centered or left? 
     Reference usually has bottom copyright centered, but user said "exactly like this" 
     referring to the main content. The provided image cuts off before copyright.
     Standard practice is small copyright text can be centered. 
     I will keep it centered as it usually looks better separate from the columns. */
  .footer-bottom {
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
  }

  .footer-info {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .pipe-separator {
    display: none;
  }
}

/* Order control for mobile */
  .footer-brand {
    order: 1;
  }

  .footer-column:nth-child(2) {
    order: 2; /* Quick Links */
  }

  .footer-column:nth-child(3) {
    order: 3; /* Contact Us */
  }

  .footer-founder {
    order: 4; /* About Founder BETWEEN contact & follow */
  }

  .social-column {
    order: 5; /* Follow Us */
  }